<template>
    <page-view>
        <div class=" bg-backgroundColor p-[20px]">
            <div class=" content-box flex py-[40px] px-[20px] bg-[#fff] rounded-md">
                <div>
                    <goods-swiper :goods_photo="goodInfoData.picList"></goods-swiper>
                </div>
                <div class="p-[10px] border flex-1 overflow-hidden ml-[80px] shadow-lg good_detail_show">
                    <p class=" text-[23px]">{{ goodInfoData.goodName }}</p>
                    <p class=" text-[13px] text-[#b0b0b0] w-[70%] mt-10">{{ goodInfoData.goodDescription }}</p>
                    <div class=" mt-10">
                        <el-tag>{{ goodInfoData.brand }}</el-tag>
                    </div>
                    <div class="flex">
                        <p class=" mt-10 text-[20px] text-[#ff6700]">{{ goodInfoData.price }}<span>元</span></p>
                        <p class="ml-[200px]">库存:{{ goodInfoData.inventory }}件</p>
                    </div>
                    <el-divider />
                    <div class=" border bg-[#fafafa] px-[25px] py-[20px] flex items-center">
                        <span class=" iconfont icon-dizhi text-[18px]"></span>
                        <span v-if="store.token === null" class=" text-[14px] ml-10">湖北省武汉市洪山区武汉华夏理工学院</span>
                        <span v-else class=" text-[14px] ml-10">{{ store.loginInfoData.area }}</span>
                    </div>
                    <el-divider />
                    <span class=" text-[18px]">选择样式</span>
                    <div class=" mt-10 text-[14px]">
                        <div class="border p-[15px] w-[200px] text-center">精装型</div>
                    </div>
                    <div class=" border bg-[#fafafa] px-[25px] py-[20px] mt-[20px] mb-[20px]">
                        <div class=" flex items-center justify-between text-[14px]">
                            <span>{{ goodInfoData.goodName }}</span>
                            <p>{{ goodInfoData.price }}<span>元</span></p>
                        </div>
                        <p class=" mt-[30px] text-[25px] text-[#ff6700]">总计：<span>{{ goodInfoData.price }}</span>元</p>
                    </div>
                    <el-button type="primary" @click="putShopCart(goodInfoData.id)">加入购物车</el-button>
                </div>
            </div>
        </div>
    </page-view>
</template>

<script setup>
import { ElNotification, ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { mainStore } from "../../store";
import API from "../../utils/API";
import LoginInfo from "../../utils/API/login";

const route = useRoute();
const store = mainStore();
const router = useRouter();

const goodInfoData = ref({})

const findById = (id) => {
    API.goodsInfo.findById(id).then(result => {
        goodInfoData.value = result;
        console.log(result);
    }).catch(error => {
        console.log(error);
    })
}

const putShopCart = (id) => {
    API.goodsInfo.putShopCart(id).then(result => {
        ElNotification({
            title: "提示",
            message: "加入购物车成功!",
            type: "success"
        });
        router.push({ name: "Shopcart" })
    })
}

onMounted(() => {
    let id = route.params.id;
    findById(id);
})


</script>

<style lang="scss" scoped>
.good_detail_show {
    :deep(.el-button) {
        width: 300px;
        height: 45px;
        letter-spacing: 1em;
    }
}
</style>